'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    TabBarIOS,
    Text,
    View,
} = React;

var base64Icon = '';


var TabBarExample = React.createClass({
    statics: {
        title: '<TabBarIOS>',
        description: 'Tab-based navigation.'
    },

    displayName: 'TabBarExample',

    getInitialState: function() {
        return {
            selectedTab: '1'
        };
    },

    _renderContent: function ( pageText: string ) {
        return (
            <View style={styles.tabContent}>
                <Text style={styles.tabText}>{pageText}</Text>
            </View>
        );
    },

    render: function() {
        return (
            <TabBarIOS
                tintColor="white"
                barTintColor="darkslateblue"
                style={styles.tabBar}>
                <TabBarIOS.Item
                    title="Blue Tab"

                    selected={this.state.selectedTab === '1'}
                    onPress={() => {
                        this.setState({
                            selectedTab: '1'
                        });
                    }}
                    style={styles.tabBarItem}>
                    {this._renderContent( "今日焦点" )}

                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="history"
                    selected={this.state.selectedTab === '2'}
                    onPress={() => {
                        this.setState({
                            selectedTab: '2'
                        });
                    }}
                    style={styles.tabBarItem}>

                    {this._renderContent( "资讯" )}
                </TabBarIOS.Item>
                <TabBarIOS.Item
                    systemIcon="more"
                    selected={this.state.selectedTab === '3'}
                    onPress={() => {
                        this.setState({
                            selectedTab: '3'
                        });
                    }}
                    style={styles.tabBarItem}>
                    {this._renderContent( "动态" )}
                </TabBarIOS.Item>
            </TabBarIOS>

        );
    }

});

var styles = StyleSheet.create({
    tabBar: {
        flex: 1,
        top: 0
    },
    tabBarItem: {
        flex: 1,
        color: "#cdcdcd"

    },
    tabContent: {
        flex: 1,
        alignItems: 'center'
    },
    tabText: {
        color: 'red',
        margin: 50
    }
});

//module.exports = TabBarExample;
AppRegistry.registerComponent('AwesomeProject', () => TabBarExample);
